<template>
	<div class="tab">
		<el-tabs v-model="editableTabsValue" type="border-card"  closable @tab-remove="removeTab" @tab-click="clickTab">
			<el-tab-pane
					v-for="(item) in editableTabs"
					:key="item.name"
					:label="item.title"
					:name="item.name"
			>
			</el-tab-pane>
		</el-tabs>

	</div>

</template>

<script>
	export default {
		name: "Tabs",
		data() {
			return {
				// editableTabsValue: this.$store.state.menus.editableTabsValue,
				// editableTabs: this.$store.state.menus.editableTabs
			}
		},
		computed: {
			editableTabs: {
				get() {
					return this.$store.state.menus.editableTabs
				},
				set(val) {
					this.$store.state.menus.editableTabs = val
				}
			},
			editableTabsValue: {
				get() {
					return this.$store.state.menus.editableTabsValue
				},
				set(val) {
					this.$store.state.menus.editableTabsValue = val
				}
			}
		},
		methods: {

			removeTab(targetName) {
				let tabs = this.editableTabs;
				let activeName = this.editableTabsValue;

				if (activeName === 'Index') {
					return
				}

				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}

				this.editableTabsValue = activeName;
				this.editableTabs = tabs.filter(tab => tab.name !== targetName);

				this.$router.push({name: activeName})

			},
			clickTab (target) {
				this.$router.push({name: target.name})
			}
		}
	}
</script>

<style scoped>
.tab /deep/ .el-tabs__content {
	padding: 0;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
}
.tab /deep/.el-tabs__item {
	font-size: 18px;

}
</style>